<template>
	<view class="agency-container"
		:style="[AppSkinVar,{'background-image': proxyForm && proxyForm.background ? `url(${$fullLink(proxyForm.background)})` : ''}]"
		:class="{'bg-zh': proxyForm && !proxyForm.background}">
		<view class="agency-history e-flex e-flex-xy-center c-white e-font-28"
			@tap="$goTo('/pages/tools/agency/history')">
			<text>{{$t('tools.申请记录')}}</text>
		</view>
		<view class="form-container e-font-28">
			<view class="form-item e-flex">
				<text class="e-m-r-46">{{$t('tools.代理等级')}}</text>
				<e-radio-group :style="{'flex-wrap': 'wrap'}" v-model="form.agentLevel">
					<e-radio :activeColor="AppSkin.primary" :customStyle="{marginRight: '10px'}"
						v-for="(item, index) in levelList" :key="index" :label="$t(item.name)" :name="item.label">

					</e-radio>
				</e-radio-group>
			</view>
			<view class="form-item e-flex e-m-b-30">
				<text class="e-m-r-46">{{$t('tools.选择地区')}}</text>
				<view class="e-flex-1 e-flex e-rela" @tap="pickerShow = true">
					<view class="e-flex-1" :class="{ 'c-regular': !form.addrText }">
						{{ form.addrText || $t('common.请选择') }}
					</view>
					<image :src="$staticPath('layout/basics/right_arrow.png')" class="img-36"></image>
				</view>
			</view>
			<view class="tips-box e-flex e-m-b-30" @tap="isAgree = !isAgree">
				<radio style="transform:scale(0.8)" :checked="isAgree" :color="AppSkin.primary" @tap.stop="isAgree = !isAgree"  />
				<view>
					<text class="e-p-r-10">{{ $t('public.我已阅读并同意') }}</text>
					<text class="c-primary"
						@tap="$goTo('/pages/tools/agency/agreement')">《{{ $t('tools.区域代理服务协议') }}》</text>
				</view>
			</view>
			<view class="submit-btn c-white e-font-32 e-flex e-flex-xy-center" :style="{background:  AppSkin.primary}"
				:class="{'submit-btn-disabled': !isAgree || !form.addrText}" @tap="handleSumbit">
				<text>{{$t('tools.submit')}}</text>
			</view>
		</view>
		<global-address ref="globalAddressRef" v-model="form.addrIds" :primary="AppSkin.primary" v-model:show="pickerShow"
			@textChange="handleTxtChange" ></global-address>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, nextTick } from 'vue'
	import {
		getAgentSetting,
		addAgentApply
	} from '@/common/request/api'
	import type {
		AgentSetting
	} from '@/common/request/api'
	import { useCurrentInstance } from '@/common/hooks'
	import type { GlobalAddressInstance } from '@/typings/components'
	import { useInit } from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'

	const ctx = useCurrentInstance()
	
	const {AppSkin} = storeToRefs(useInit())
	
	const proxyForm = ref<AgentSetting | undefined>(undefined)
	const pickerShow = ref(false)
	const isAgree = ref(false)

	const form = ref<{
		agentLevel:number
		addrIds:number[]
		addrText:string
	}>({
		agentLevel: 1,
		addrIds: [],
		addrText: '',
	})

	const levelList = computed(() => {
		const arr = [{
			name: 'tools.省代',
			label: 1
		}, {
			name: 'tools.市代',
			label: 2
		}, {
			name: 'tools.areaAgency',
			label: 3
		}, {
			name: 'tools.street',
			label: 4
		}]
		const list : typeof arr = []
		if (proxyForm.value?.provinceState) {
			list.push(arr[0])
		}
		if (proxyForm.value?.cityState) {
			list.push(arr[1])
		}
		if (proxyForm.value?.areaState) {
			list.push(arr[2])
		}
		if (proxyForm.value?.townState) {
			list.push(arr[3])
		}
		return list
	})
	const globalAddressRef = ref<GlobalAddressInstance>()
	const init = (isGet = true) => {
		nextTick(() => {
			try {
				globalAddressRef.value?.init?.(isGet)
			} catch (e) {
				nextTick(() => {
					globalAddressRef.value?.init?.(isGet)
				})
			}
		})
	}
	const handleTxtChange = (val:string) => {
		form.value.addrText = val
	}
	const handleSumbit = () => {
		if (isAgree.value && form.value.addrText) {
			if (!form.value.addrText) {
				uni.showToast({
					title: ctx.$t('tools.qxzdqhtj'),
					icon: 'none'
				})
				return
			}
			const params = {
				agentLevel: form.value.agentLevel,
				agentArea: form.value.addrIds[form.value.addrIds.length - 1]
			}
			addAgentApply(params).then(() => {
				ctx.$toastApp(ctx.$t('tools.tjcgddsh'))
				form.value = {
					agentLevel: 1,
					addrIds: [],
					addrText: '',
				}

			})
		}

	}

	// submitLoading: false
	getAgentSetting().then(res => {

		proxyForm.value = res.data
	})
	init()
</script>

<style lang="scss" scoped>
	.agency-container {
		width: 100vw;
		height: 100vh;
		background-size: 100%;
		background-repeat: no-repeat;

		.agency-history {
			position: fixed;
			top: 320rpx;
			right: 0;
			width: 160rpx;
			height: 70rpx;
			background: rgba(0, 0, 0, 0.49);
			border-radius: 200rpx 0px 0px 200rpx;
		}
	}

	.bg-zh {
		background: url(../static/agency-bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.form-container {
		width: calc(100vw - 40rpx);
		border-radius: 20rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;
		color: #313133;
		position: fixed;
		bottom: 68rpx;
		left: 20rpx;

		.form-item {
			padding: 30rpx 20rpx;
		}
	}

	.submit-btn {
		height: 90rpx;
		border-radius: 45rpx;

		&-disabled {
			opacity: 0.5;
		}
	}
</style>